  /* 主色调 */
  .wColor {
    color: #FFFFFF;
  }

  .color6 {
    color: #666666;
  }

  .rColor {
    color: #F03636;
  }

  .color7 {
    color: #777777;
  }

  .color9 {
    color: #999999;
  }

  .color5 {
    color: #555555;
  }

  .color3 {
    color: #333333;
  }

  .colorf8 {
    color: #f8f8f8;
  }

  .colorAE {
    color: #AEB3B6;
  }

  .color1A {
    color: #1A60FF;
  }

  /* 背景颜色 */
  .wBgColor {
    background-color: #FFFFFF;
  }
  .wBgColor2 {
    background-color: #2474CF;
  }

  .w100v {
    width: 100vw;
  }

  .h100v {
    height: 100vh;
  }

  /* flex布局 */
  .flexWrap {
    flex-wrap: wrap;
  }

  .flexLeft {
    display: flex;
    align-items: center;
  }

  .flexRight {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .flexCon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .flexColumn {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .flexBet {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .flexAro {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .textCenter {
    text-align: center;
  }

  .boBox {
    box-sizing: border-box;
  }

  /* 定位 */
  .posR {
    position: relative;
  }

  .posF {
    position: fixed !important;
  }

  .posA {
    position: absolute;
  }

  .posS {
    position: sticky;
  }

  /* 单行文字超出显示省略号 */
  .overstep {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* 多行文本隐藏 */
  .overstep2 {
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .maxWidth {
    max-width: 1200px;
    margin: 0 auto;
  }

  /* 字体加粗 */
  .fonBold {
    font-weight: bold;
  }

  .textareaBox {
    align-items: flex-start;
  }

  .cup {
    cursor: pointer;
  }

  // 字体大小
  @for $i from 12 through 40 {
    .fontS#{$i} {
      font-size: #{$i}px;
    }
  }

  @for $i from 1 through 10 {
    .flex#{$i} {
      flex: #{$i};
    }
  }

  // 上外边距
  @for $i from 5 through 50 {
    .marT#{$i} {
      margin-top: #{$i}px;
    }

    .marB#{$i} {
      margin-bottom: #{$i}px;
    }

    .marL#{$i} {
      margin-left: #{$i}px;
    }

    .marR#{$i} {
      margin-right: #{$i}px;
    }

    .marTB#{$i} {
      margin: #{$i}px 0;
    }

    .marLR#{$i} {
      margin: 0 #{$i}px;
    }

    .padT#{$i} {
      padding-top: #{$i}px;
    }

    .padB#{$i} {
      padding-bottom: #{$i}px;
    }

    .padL#{$i} {
      padding-left: #{$i}px;
    }

    .padR#{$i} {
      padding-right: #{$i}px;
    }

    .padTB#{$i} {
      padding: #{$i}px 0;
    }

    .padLR#{$i} {
      padding: 0 #{$i}px;
    }

    .pad#{$i} {
      padding: #{$i}px;
    }

    .borR#{$i} {
      border-radius: #{$i}px;
    }
  }